<template>
  <div class="content-in">
    <div class="banner">
      <img src="@/assets/images/about/bg1.png" />
      <p>{{ $t('aboutUs.title') }}</p>
    </div>
    <div class="story">
      <div class="flex">
        <p class="title">
          <br />
          {{ capitalizeLang === 'Zh' ? '集团简介' : 'OUR STORY' }}
        </p>
        <div class="flex-1">
          <h1>{{ $t('aboutUs.introduction') }}</h1>
          <p>{{ $t('aboutUs.introductionA') }}</p>
          <p>{{ $t('aboutUs.introductionB') }}</p>
        </div>
      </div>
    </div>
    <div class="service">
      <div class="mg-x-24">
        <img src="@/assets/images/about/bg2.png" />
        <p class="ft-22">{{ $t('aboutUs.serve') }}</p>
        <p class="ft-16">{{ $t('aboutUs.serveA') }}</p>
      </div>
      <div class="mg-x-24 pd">
        <div class="bg"></div>
        <img src="@/assets/images/about/bg03.png" />
        <p class="ft-22">{{ $t('aboutUs.industries') }}</p>
        <p class="ft-16">{{ $t('aboutUs.industriesC') }}</p>
      </div>
      <div class="mg-x-24 bg04">
        <p class="ft-22">{{ $t('aboutUs.provide') }}</p>
        <p class="ft-16">{{ $t('aboutUs.provideC') }}</p>
      </div>
    </div>
    <div class="culture">
      <p class="title grey"></p>
      <p class="title">{{ capitalizeLang === 'Zh' ? '集团文化' : 'GROUP CULTURE' }}</p>
      <div class="group">
        <div class="g-row">
          <div>
            <p class="ft-26 blue ft-bold">{{ $t('aboutUs.professional') }}</p>
            <p class="ft-16">{{ $t('aboutUs.professionalC') }}</p>
          </div>
          <img src="@/assets/images/about/bg05.png" />
        </div>
        <div class="g-row fr">
          <img src="@/assets/images/about/bg06.png" class="mg-t-30" />
          <div>
            <p class="ft-26 blue ft-bold">{{ $t('aboutUs.focus') }}</p>
            <p class="ft-16">{{ $t('aboutUs.focusC') }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="honours">
      <p class="title grey"></p>
      <p class="title">{{ capitalizeLang === 'Zh' ? '集团荣誉' : 'GROUP HONOURS' }}</p>
      <div class="honours-in">
        <div class="row">
          <p>{{ $t('aboutUs.groupA') }}</p>
          <p>{{ $t('aboutUs.groupB') }}</p>
        </div>
        <div class="row">
          <p>{{ $t('aboutUs.groupC') }}</p>
          <p>{{ $t('aboutUs.groupD') }}</p>
          <p>{{ $t('aboutUs.groupE') }}</p>
        </div>
        <div class="row">
          <p>{{ $t('aboutUs.groupF') }}</p>
          <p>{{ $t('aboutUs.groupG') }}</p>
        </div>
        <div class="row">
          <p>{{ $t('aboutUs.groupH') }}</p>
          <p>{{ $t('aboutUs.groupI') }}</p>
          <p>{{ $t('aboutUs.groupJ') }}</p>
        </div>
        <div class="row">
          <p>{{ $t('aboutUs.groupK') }}</p>
        </div>
      </div>
    </div>
    <div class="milestones">
      <p class="title grey"></p>
      <p class="title">{{ capitalizeLang === 'Zh' ? '里程碑' : 'MILESTONES' }}</p>
      <div class="m-content">
        <div class="pre" @click="handleChange(-1)"></div>
        <div ref="milesRef" class="m-c-in">
          <div class="m-c-top">
            <div
              v-for="(item, index) in topList"
              :key="index"
              class="m-c-row"
              :class="{ active: active === index * 2 + 1 }"
            >
              <div class="jusity">
                <span class="ft-22">{{ item.year }}</span>
                <span class="ft-16">{{ item[`title${capitalizeLang}`] }}</span>
              </div>
              <p class="ft-14">{{ item[`content${capitalizeLang}`] }}</p>
            </div>
          </div>
          <div class="mile-bottom">
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
            <div class="radio"></div>
          </div>
          <div class="m-c-btm">
            <div
              v-for="(item, index) in bottomList"
              :key="index"
              class="m-c-row"
              :class="{ active: active === index * 2 }"
            >
              <div class="jusity">
                <span class="ft-22">{{ item.year }}</span>
                <span class="ft-16">{{ item[`title${capitalizeLang}`] }}</span>
              </div>
              <p class="ft-14">{{ item[`content${capitalizeLang}`] }}</p>
            </div>
          </div>
        </div>
        <div class="next" @click="handleChange(+1)"></div>
      </div>
    </div>
    <div class="global">
      <p class="title grey"></p>
      <p class="title">{{ capitalizeLang === 'Zh' ? '全球布局' : 'GLOBAL LAYOUT' }}</p>
      <img src="@/assets/images/about/bg07.png" />
      <div class="align-item">
        <div>
          <p class="blue ft-36">100+</p>
          <p class="ft-16">{{ $t('aboutUs.globalA') }}</p>
        </div>
        <div>
          <p class="blue ft-36">500+</p>
          <p class="ft-16">{{ $t('aboutUs.globalB') }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      active: 0,
      milesList: [
        {
          year: 2009,
          titleEn: 'A DREAM',
          titleZh: '一个梦想',
          contentEn:
            'Inspired by the legendary Steve Jobs, three young men embarked on a journey to pursue their dreams. They spent their days wandering around the Huaqiangbei electronics market, and immersed themselves in forums and communities at night, surrounded by the tools of their trade - soldering irons, air guns, code, and chips. Day in and day out, they pursued their passion without rest.',
          contentZh:
            '在大神乔布斯的感召下，三个大男孩开始了自己的逐梦旅程，他们白天混迹在华强北，晚上泡在论坛社区烙铁、风枪、代码、芯片伴随着他们每个日日夜夜。',
        },
        {
          year: 2010,
          titleEn: 'ALL READY TO GO',
          titleZh: '整装待发',
          contentEn:
            "Constant failure constant persistence, faith to support the team steadily forward; small team continues to create a small miracle, mainland China's first set of navigation, Bluetooth Andriod tablet, the first 9.7-inch IPS display A8 processor tablet; the first 7-inch A8 processor 3G call tablet computer.",
          contentZh:
            '不断的失败不断的坚持，信念支撑着团队稳步向前;小团队不断创造着小奇迹，中国大陆地区第一台集导航，蓝牙的Andriod平板，第-台9.7英寸IPS显示屏A8处理器平板;第一台7寸A8处理器3G通话平板电脑。',
        },
        {
          year: 2011,
          titleEn: 'THIS IS A STARTING POINT',
          titleZh: '厚积薄发',
          contentEn:
            'SOTEN has finally established itself as an IDH, marking a significant milestone in its journey from a simple workshop. With accumulated expertise, the team has found a new starting point in their endeavors.',
          contentZh: '硕腾科技正式成立，从工作室转向IDH,技术的积累让团队有了新的起航点。',
        },
        {
          year: 2012,
          titleEn: 'SHOW YOUR BEST',
          titleZh: '展露锋芒',
          contentEn:
            'The continuous updates and iterations of the 3G communication tablet and 3G smartphone have excited and aroused anticipation in everyone. The SOTEN team has entered a phase of small, fast steps, and the harshness of the market has made the team stronger.',
          contentZh:
            '3G通讯平板.3G智能手机的不断更新和迭代让所有人兴奋和期待，硕腾团队进入小步快跑阶段，市场的残酷让团队变得更加坚强。',
        },
        {
          year: 2014,
          titleEn: 'WIN SPEEDY SUCCESS',
          titleZh: '旗开得胜',
          contentEn:
            "The accumulation of experience and technology has resulted in a process of transformation from quantitative to qualitative, further solidifying the team's goal and determination towards the industrial-level product market.",
          contentZh:
            '经验和技术的积累，量变到质变的过程，更加坚定了团队工业级产品市场方向的目标和决心。',
        },
        {
          year: 2015,
          titleEn: 'LEARNING HARD AND TIRELESS',
          titleZh: '刻苦学习',
          contentEn:
            'Continuous investment in technology, R&D, and funds have led to constant product launches. Small, medium, and large size screens in the form of tablets and handheld devices have been continuously developed and perfected, with increasingly rich and reliable industrial-level functions. RFID, barcodes, ID cards, Beidou satellite communication, fingerprint and iris recognition, 3G, 4G, Zigbee, IC chips, magnetic stripe cards, and encryption chips, among others, have been developed. The year 2015 marked a period of comprehensive development. ',
          contentZh:
            '不断的技术投入,不断的研发投入,不断的资金投入,新的产品不断推出;小尺寸、中尺寸.大尺寸，平板,手持机等等不断推出和完善,工业级应用功能越来越丰富可靠。RFID、条码、身份证、北斗、卫星通讯、指纹、虹膜、3G、4G. Zigbee.IC卡、磁条卡、加密芯片...2015是全面发展的一年。',
        },
        {
          year: 2016,
          titleEn: 'FAMOUS IN THE INDUSTRY',
          titleZh: '扬名万里',
          contentEn:
            "The team continues to grow, and all brothers and sisters at SOTEN uphold the company's philosophy of 'perseverance and honesty lead us to success' while working with partners to achieve mutual growth and pushing forward together. As a result, SOTEN Technology has been upgraded to a national-level high-tech enterprise and a Shenzhen high-tech enterprise.",
          contentZh:
            '团队的不断扩大,所有硕腾的兄弟姐妹秉承“执信前行,秉诚致远”的公司理念和合作伙伴-起共同成长，一起前行,升级成为国家级高新企业、深圳市高新企业。',
        },
        {
          year: 2017,
          titleEn: 'CREATE MORE GLORY',
          titleZh: '再创辉煌',
          contentEn:
            'The company has moved into a newly renovated office space. While continuously launching new products, the company has also strengthened quality and system control, and has obtained the ISO 9001/14001/18001 international quality system standard certification. ',
          contentZh:
            '公司搬入崭新的的办公场地。产品不断推陈出新的同时,公司加大了质量管控,体系管控等建设,通过了IS09001/14001/18001国际质量体系标准认证.',
        },
        {
          year: 2018,
          titleEn: 'FOR A BETTER FUTURE',
          titleZh: '锦绣前程',
          contentEn:
            "With a steadfast belief and clear objectives, the team at SOTEN Technology rolls up their sleeves to work together, striving towards a brighter future and to become a leading player in the global reinforced terminal product market. Let's go!",
          contentZh:
            '坚定的信念,明确的目标,硕腾的小伙伴们一起撸起袖子干吧,为了更美好的未来,为了成为全球工业级加固终端产品市场的领跑者而.....加油! ! !',
        },
        {
          year: 2019,
          titleEn: 'NEW OPPORTUNITIES',
          titleZh: '新的机会',
          contentEn: 'We have launched e-commerce and brand plans.',
          contentZh: '我们启动了电子商务计划和品牌计划。',
        },
        {
          year: 2020,
          titleEn: 'BREAKTHROUGH AND DEVELOPMENT',
          titleZh: '突破与发展',
          contentEn:
            'Rapid growth in sales revenue and an increasing number of global cooperation partners.',
          contentZh: ' 销售额快速增长，更多全球合作伙伴.',
        },
        {
          year: 2021,
          titleEn: "King's Glory",
          titleZh: '王者荣耀',
          contentEn:
            "Chairman Luo Chang has been honored by Alibaba's international platform as a signed lecturer, star lecturer, data expert, and best mentor. SOTEN Technology is a leading business in its industry and a trusted member of Alibaba's international platform. It is the first SKA business in the Shenzhen region and has been awarded the title of five-star seller by Alibaba Overseas Gold Brand, achieving a star rating of 4 within 3 months.",
          contentZh:
            '董事长罗畅获得阿里国际站的签约协议讲师、明星讲师、数据达人、最佳导师等荣誉。硕腾科技是阿里巴巴国际站的行业领袖商家、信保实收王牌企业。深圳大区第一家SKA商家，阿里海外金品诚企5星商家、金品3个月零星到4星。',
        },
        {
          year: 2022,
          titleEn: 'Really impressive',
          titleZh: '真的很牛',
          contentEn:
            "By leveraging Alibaba's international platform, the company has rapidly completed the overseas channel layout and has successfully undertaken numerous national-level projects, such as the United Nations' 5-year project contract and the mobile informatization of Pakistan's national administrative system. It has achieved high growth overseas and worked closely with local partners to promote and implement Chinese technology and standards. From 2019 to 2022, the GMV of its international platform skyrocketed from CNY 8 million to CNY 260 million, representing a growth of 3200%.",
          contentZh:
            '依托阿里国际站快速完成海外渠道布局，并完成了大量国家级项目，比如联合国5年期项目合同，巴基斯坦国家行政系统的移动信息化等，在海外获得高速增长的同时和当地伙伴一起共同推进和实现中国技术、中国标准的输出。2019年-2022年国际站线上GMV从800W-26000W，实现3200%增长。',
        },
        {
          year: 2023,
          titleEn: 'Innovation upgrade',
          titleZh: '创新升级',
          contentEn:
            'SOTEN has a complete and comprehensive product line in the industry, always adhering to the philosophy of self-reliant research and development and technological innovation. In 2023, they will launch a brand-new X series product and upgrade their commercial growth model, focusing on high-value customer acquisition and operation, thereby providing high-quality industry intelligence terminal products for customers worldwide. ',
          contentZh:
            '硕腾科技旗下拥有完整的全行业产品线，始终坚持自主研发和技术创新的宗旨，2023推出全新X系列产品与商品成长模型升级，进行高价值人群的沉淀与运营，为全球客户提供高质量的行业智能终端产品！',
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['capitalizeLang']),
    topList() {
      return this.milesList.filter((_, index) => index % 2 === 1)
    },
    bottomList() {
      return this.milesList.filter((_, index) => index % 2 === 0)
    },
  },
  methods: {
    handleChange(val) {
      const current = this.active + val
      if (current < 0 || current > this.milesList.length - 1) {
        return
      }
      // 浏览器高度视图
      const w = document.documentElement.clientWidth || document.body.clientWidth
      this.$refs.milesRef.scrollTo({
        left: (w / 1920) * 120 * current,
        behavior: 'smooth',
      })
      this.active = current
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.content-in {
  display: flex;
  flex-direction: column;

  .banner {
    display: flex;
    position: relative;

    img {
      width: 100%;
    }

    p {
      position: absolute;
      left: 50%;
      .top(320);
      .ft(36);

      font-weight: bold;
      color: #fff;
      transform: translateX(-50%);
    }
  }

  .story {
    .width(1200);
    .pd(100, 0, 0, 0);

    margin: 0 auto;

    .flex {
      .title {
        .width(280);
        .ft(30);
        .pd(178, 0, 0, 32);

        background: #0762cb;
        font-weight: bold;
        color: #fff;
        font-style: italic;
        position: relative;

        &::before {
          .width(70);
          .height(4);

          background: #fff;
          content: '';
          display: block;
          position: absolute;
          .top(117);
        }
      }

      .flex-1 {
        flex: 1;
        overflow: hidden;
        .ft(16);

        color: #333;
        .pd(0, 0, 0, 70);

        h1 {
          .ft(24);
          .mg(0, 0, 10, 0);
        }
      }
    }
  }

  .service {
    .width(1200);
    .pd(20, 0, 0, 0);

    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .bg04 {
      background-image: url(@/assets/images/about/bg04.png);
      background-size: auto 100%;
      background-position: left;
    }

    .mg-x-24 {
      .width(384);
      .height(410);

      display: flex;
      flex-direction: column;
      position: relative;
      color: #fff;

      img {
        width: 100%;
        height: auto;
        display: block;
      }

      .ft-22 {
        .ft(22);
        .pd(54, 0, 0, 36);

        position: absolute;
        font-weight: bold;
      }

      .ft-16 {
        .ft(16);
        .lineH(20);
        .pd(100, 40, 0, 36);

        position: absolute;
      }

      .bg {
        .width(384);
        .height(170);

        background: #0b2143;
      }

      &.pd {
        img {
          width: 100%;
          .height(220);
          .mg(20, 0, 0, 0);
        }

        .ft-22 {
          .pd(204, 0, 0, 36);
        }

        .ft-16 {
          .pd(240, 0, 0, 36);
        }
      }
    }
  }

  .culture {
    .mg(30, 0, 0, 0);
    .pd(60, 0, 0, 0);

    background: #f6f7f9;

    .title {
      text-align: center;
      .ft(30);
      .lineH(30);

      color: #333;
      font-weight: bold;

      &.grey {
        color: #b0b7bd;
      }
    }
  }

  .group {
    .width(1200);
    .pd(30, 0, 100, 0);

    margin: 0 auto;

    .g-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .mg(36, 0, 0, 0);

      &::after {
        .width(500);
        .height(280);

        content: '';
        right: 0;
        .mg(60, 24, 0, 0);

        display: block;
        position: absolute;
        background: #dcdee0;
      }

      & > div {
        .mg(0, 100, 0, 40);
        flex: 1;
      }

      &.fr {
        &::after {
          left: 0;
          .mg(100, 0, 0, 24);
        }

        & > div {
          .mg(0, 40, 0, 100);
        }
      }
    }

    img {
      .flex(500);
      .width(500);
      .height(280);

      position: relative;
      z-index: 20;
      display: block;
    }

    .ft-26 {
      .ft(26);
    }

    .ft-16 {
      .ft(16);
    }

    .mg-t-30 {
      margin-top: 30px;
    }
  }

  .honours {
    background-image: url(@/assets/images/about/bg3.png);
    background-size: 100% 100%;
    .pd(60, 0, 95, 0);

    .title {
      text-align: center;
      .ft(30);
      .lineH(30);

      color: #fff;
      font-weight: bold;

      &.grey {
        color: #b0b7bd;
      }
    }

    .honours-in {
      .width(1200);

      margin: 0 auto;
      .pd(40, 0, 0, 0);
    }

    .row {
      .pd(20, 60, 20, 36);
      .mg(60, 0, 0, 0);

      border-bottom: 2px solid rgba(255, 255, 255, 0.5);
      display: flex;
      justify-content: space-between;
      color: #fff;
      .ft(18);

      p {
        display: flex;
        align-items: center;

        &::before {
          display: inline-block;
          content: '';
          .width(8);
          .height(8);
          .mg(0, 8, 0, 0);

          background: #0762cb;
          border-radius: 50%;
        }
      }
    }
  }

  .milestones {
    background: #f6f7f9;
    .pd(60, 0, 95, 0);

    .title {
      text-align: center;
      .ft(30);
      .lineH(30);

      color: #333;
      font-weight: bold;

      &.grey {
        color: #b0b7bd;
      }
    }

    .m-content {
      .pd(44, 280, 44, 280);

      border-radius: 2px;
      color: #fff;
      position: relative;
      display: flex;
      align-items: center;

      .m-c-in {
        flex: 1;
        position: relative;
        overflow: auto;

        .m-c-top {
          font-size: 0;
          white-space: nowrap;
          .width(2664);
          .pd(0, 0, 0, 116);
        }

        .m-c-row {
          .flex(300);
          .width(300);
          .height(300);
          .pd(24, 18, 10, 18);
          .mg(0, 0, 0, 64);

          display: inline-block;
          background-color: #fff;
          vertical-align: top;
          position: relative;
          white-space: normal;

          &::after {
            content: '';
            display: block;
            border-left: 0.625vw solid transparent;
            border-right: 0.625vw solid transparent;
            border-top: 0.625vw solid #fff;
            width: 0;
            height: 0;
            bottom: -0.625vw;
            position: absolute;
            left: 50%;
            margin-left: -0.625vw;
          }

          .jusity {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
          }

          .ft-22 {
            .ft(22);
            .lineH(24);

            font-weight: bold;
            color: #333;
          }

          .ft-16 {
            .ft(16);
            .lineH(24);

            font-weight: bold;
            color: #0762cb;
            text-align: right;
          }

          .ft-14 {
            .ft(14);
            .lineH(18);
            .height(200);

            font-weight: 400;
            color: #444;
            overflow-y: auto;
            word-break: break-word;

            &::-webkit-scrollbar {
              .width(10);
            }
          }

          &.active {
            background-color: #0762cb;

            .ft-22 {
              color: #fff;
            }

            .ft-14 {
              color: #fff;
            }
          }
        }

        .m-c-btm {
          font-size: 0;
          white-space: nowrap;
          .pd(0, 0, 0, 0);

          .m-c-row {
            &:nth-child(1) {
              margin: 0;
            }

            &::after {
              .top(-12);

              border-bottom: 0.625vw solid #fff;
              border-top: none;
            }
          }
        }
      }
    }

    .pre {
      flex: 0 0 1.875vw;
      .height(36);
      cursor: pointer;
      background-color: #0261bc;
      border-radius: 50%;
      position: relative;
      .mg(0, 20, 0, 20);

      &::after {
        left: 0.75vw;
        .top(11);

        content: '';
        .height(12);
        .width(12);

        display: block;
        position: absolute;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
        transform: rotate(45deg);
      }
    }

    .next {
      .height(36);
      .mg(0, 20, 0, 20);

      flex: 0 0 1.875vw;
      cursor: pointer;
      background-color: #fff;
      border-radius: 50%;
      position: relative;
      border: 1px solid #747474;

      &::after {
        right: 0.7vw;
        .top(11);

        content: '';
        .height(12);
        .width(12);

        display: block;
        position: absolute;
        border-left: 1px solid #747474;
        border-bottom: 1px solid #747474;
        transform: rotate(-135deg);
      }
    }
  }

  .mile-bottom {
    position: relative;
    display: flex;
    justify-content: space-between;
    .width(2664);
    .pd(30, 138, 30, 138);

    &::before {
      content: '';
      display: block;
      height: 2px;
      .width(2664);
      background-color: #ddd;
      position: absolute;
      top: 50%;
      left: 0;
    }

    .radio {
      .width(24);
      .height(24);

      border-radius: 50%;
      background-color: rgba(2, 97, 188, 0.1);
      position: relative;
      display: inline-block;

      &::after {
        content: '';
        display: block;
        .width(10);
        .height(10);

        background-color: #666;
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .global {
    background: #fff;
    .pd(60, 0, 95, 0);

    font-weight: bold;

    .title {
      text-align: center;
      .ft(30);
      .lineH(30);

      color: #333;
      font-weight: bold;

      &.grey {
        color: #b0b7bd;
      }
    }

    img {
      .width(1200);

      display: block;
      margin: 0 auto;
    }

    .ft-16 {
      .ft(16);

      margin-bottom: 16px;
      font-weight: 400;
      .width(360);
    }

    .align-item {
      display: flex;
      justify-content: center;
      .mg(-100, 0, 0, 0);

      & > div {
        .mg(0, 60, 0, 60);
      }
    }

    .ft-36 {
      .ft(36);
    }
  }
}
</style>
